<template>
  <div class="muzi muzi-form">
    <el-form :model="form" :rules="rules" ref="FormHandle" v-loading="loading" label-width="125px">
      <muzi-divide name="基本信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name" required>
            <el-input v-model="form.name" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="identity" required :error="error.type">
            <el-input v-model="form.identity" @change="onIdentity" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="type" required>
            <el-select v-model="form.type" placeholder="请选择证件类型">
              <el-option-group v-for="group in options.type" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday" required>
            <el-date-picker v-model="form.birthday" type="date" placeholder="请选择出生日期" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex" required>
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option v-for="item in options.sex" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile" required>
            <el-input v-model="form.mobile" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="工作信息"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8" v-show="form.serial">
          <el-form-item label="职员编码" prop="serial">
            <el-input v-model="form.serial" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作状态" prop="status" required>
            <el-select v-model="form.status" placeholder="请选择工作状态">
              <el-option v-for="item in options.status" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入职日期" prop="join">
            <el-date-picker v-model="form.join" type="date" placeholder="请选择入职日期" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职日期" prop="leave">
            <el-date-picker v-model="form.leave" :disabled="isWork" type="date" placeholder="请选择离职日期" style="width: 100%" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="operating" :gutter="5">
      <el-col :offset="19" :span="5">
        <el-button type="primary" size="large" :loading="saving" @click="onSubmit()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { resolve } from "@/utils/identity"

import { sex, type, status } from "@/data/employee"

export default {
  data() {
    return {
      id: null,
      saving: false,
      loading: false,
      form: {},
      rules: {},
      options: {
        sex, type, status
      },
      error: {
        type: ''
      }
    }
  },
  mounted() {
    // 初始化员工信息
    const {key} = this.$route.query;
    this.$API.employee.detail.get(key).then(res => {
      if (res.success) return this.form = res.data || {};
    })
  },
  computed: {
    isWork() {
      return this.form.status === '在职';
    }
  },
  methods: {
    onSubmit() {
      this.$refs.FormHandle.validate(async (valid) => {
        if (valid) {
          this.saving = true;
          let res = await this.$API.employee.create.post(this.form);
          this.saving = false;
          if (res.success) {
            this.$message.success("保存成功")
            this.$router.push({name: "employee", replace: true})
          } else {
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
    onIdentity(value) {
      if (value && value.length === 18) {
        const res = resolve(value);
        if (res.success) {
          this.form.type = '居民身份证';
          this.form.birthday = res.born;
          this.form.sex = this.options.sex[res.sex].value;
        }
        this.error.type = res.success ? '' : res.message;
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
